<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .left {
            width: 80px;
            /* height: 30px; */
            text-align: center;
            line-height: 47px;
            background: rgb(42, 163, 184);
            float: left;
        }

        .right {
            float: left;
            width: 500px;
            background: #ccc;
            padding: 25px 20px 80px 25px;
            border-left: 3px solid #666;
        }

        .top {
            height: 145px;
            background: pink;
        }

        .top img {
            width: 280px;
            height: 108px;
            margin-left: 100px;
            margin-bottom: 5px;
        }

        .top span {
            display: block;
            margin-left: 220px;
        }

        .bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .bottom > li {
            flex: 1;
            width: 70px;
            height: 100px;
            background: cyan;
        }

        .bottom > li img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right">
    <!-- <div class="top">
        <img src="" alt="">
        <span>果子</span>
    </div>
    <ul class="bottom">
        <li>
            <img src="" alt="">
            <p>mmm</p>
        </li>
    </ul> -->
</div>
<script src="./jquery-2.0.3/jquery-2.0.3.min.js"></script>
<script>
        $.ajax({
            url:'http://192.168.40.115/zerg/public/index.php/api/v1/category/all',
            type:'get',
            success:function(res){
                console.log(res);
                $(res).each(function(index,item){
                    $('<div>'+item.name+'</div>').appendTo('.left');
                    $('.left div').click(function(){
                        var id = item.id;
                    })
                    $('<div class="top"><img src="'+item.img.url+'" alt=""><span>'+item.name+'</span></div>'+
                    '<ul class="bottom">'+
                    // <li>
                    //     <img src="" alt="">
                    //     <p></p>
                    // </li>
                    '</ul>').appendTo('.right');
                })
            }
        })
        // 默认加载第一个分类的数据
        $.ajax({
             url:'http://192.168.40.115/zerg/public/index.php/api/v1/product/by_category',
            type:'get',
            data:{id:2},
            success:function(res){
                console.log(res);
                $(res).each(function(index,item){
                    
                    // $('.right').append($('<div class="top"><img src="'+item.img.url+'" alt=""><span>'+item.name+'</span></div>'+
                    // '<ul class="bottom">'+
                    // // <li>
                    // //     <img src="" alt="">
                    // //     <p></p>
                    // // </li>
                    // '</ul>'));
                    console.log(item.main_img_url)
                    $('.bottom').append($('<li><img src="'+item.main_img_url+'" alt=""><p>'+item.name+'</p></li>'));
                })
            }
        })

</script>
</body>
</html>